登录注册页是管理后台系统的入口页面，涉及表单组件、路由配置、页面布局等多个知识点的综合运用。本节从行业设计方案分析出发，梳理登录注册页的常见结构模式，最终落地为基于 Element Plus 表单组件的 Vue 3 实现。
登录页设计方案分析
在动手编码之前，先调研主流产品的登录页设计方案，有助于确定适合自己项目的结构。以下是几种典型模式：
火山引擎模式：将账号登录和手机号登录用 Tab 标签页分离，底部放置第三方登录入口。这种方式将不同的登录方式在视觉上做了明确区分，用户不会产生困惑。
Naive Admin 模式：顶部放置"没有账号？免费注册"的链接，登录和注册通过 Tab 切换。表单字段较少（账号 + 密码），底部排列第三方登录图标。页面在移动端会把左侧的装饰图片移到中间，登录表单放在下方滚动区域。
Vben Admin 模式：不使用响应式布局，在窄屏下直接隐藏背景图片。虽然实现简单，但移动端体验较差。
综合以上方案，一个完整的登录注册页面应包含以下结构层次：
登录注册页
├── 标题（可选 prop）
├── 登录/注册切换入口
├── Tab 切换（账号登录 / 手机号登录 / 二维码登录）
├── 表单区域
│ ├── 输入框组（用户名、密码等）
│ ├── 记住账号复选框
│ └── 登录按钮
├── 忘记密码提示
└── 第三方登录（分隔线 + 图标列表）
text
表单组件基础
Element Plus 的表单组件由 el-form、el-form-item、el-input 等子组件构成。一个基本的登录表单结构如下：
// types/login.ts
export interface LoginFormPrompt {
username: string
password: string
phone: string
code: string
remember: boolean
}
export interface LoginItem {
icon: string
url: string
}
typescript
<!-- pages/login/index.vue -->
<template>
<div class="login-page">
<el-form
ref="formRef"
:model="form"
label-width="0"
class="login-form"
>
<!-- 标题 -->
<h2 v-if="title" class="text-xl font-bold mb-6 text-center">
{{ title }}
</h2>
<!-- 登录/注册切换 -->
<div class="flex justify-between items-center mb-4">
<el-tabs v-model="activeTab">
<el-tab-pane label="账号登录" name="account" />
<el-tab-pane label="手机号登录" name="phone" />
</el-tabs>
<router-link to="/register" class="text-sm text-blue-500">
没有账号？免费注册
</router-link>
</div>
<!-- 账号登录表单 -->
<template v-if="activeTab === 'account'">
<el-form-item>
<el-input
v-model="form.username"
placeholder="请输入用户名"
prefix-icon="User"
/>
</el-form-item>
<el-form-item>
<el-input
v-model="form.password"
type="password"
placeholder="请输入密码"
prefix-icon="Lock"
show-password
/>
</el-form-item>
</template>
<!-- 手机号登录表单 -->
<template v-if="activeTab === 'phone'">
<el-form-item>
<el-input
v-model="form.phone"
placeholder="请输入手机号"
prefix-icon="Phone"
/>
</el-form-item>
<el-form-item>
<div class="flex gap-2 w-full">
<el-input
v-model="form.code"
placeholder="请输入验证码"
prefix-icon="Message"
/>
<el-button type="primary" plain>获取验证码</el-button>
</div>
</el-form-item>
</template>
<!-- 记住账号 -->
<el-form-item>
<div class="flex justify-between items-center w-full">
<el-checkbox v-model="form.remember">记住账号</el-checkbox>
<el-link type="primary" :underline="false">忘记密码？</el-link>
</div>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item>
<el-button
type="primary"
class="w-full"
@click="handleSubmit"
>
登录
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { LoginFormPrompt } from './types/login'
defineProps<{
title?: string
}>()
const activeTab = ref('account')
const form = reactive<LoginFormPrompt>({
username: '',
password: '',
phone: '',
code: '',
remember: false,
})
const handleSubmit = () => {
console.log('提交登录:', form)
}
</script>
vue
路由配置
登录页面使用独立布局（SinglePage），不包含侧边栏和导航栏。在路由配置中通过 meta 字段指定布局和是否在菜单中隐藏：
// router/routes.ts
{
path: '/login',
name: 'Login',
component: () => import('~/pages/login/index.vue'),
meta: {
layout: 'SinglePage',
hideMenu: true,
title: '登录注册页',
},
}
typescript
hideMenu: true 确保登录页面不会出现在左侧菜单的导航列表中。
登录页面的设计考量
在正式编码之前，需要考虑以下几个设计决策：
表单位置：表单可以位于页面左侧、右侧或居中。不同位置对应不同的 position 配置（left、right、center）。
标题显示：标题（title）作为可选 prop，由父组件（SinglePage 布局）从路由 meta 中获取。
登录方式切换动画：参考 Naive Admin 和 Vben Admin 的实现，在切换不同登录方式时可以加入 DOM 过渡动画，如 el-tab-pane 自带的淡入效果或自定义的 <transition> 动画。
第三方登录图标：通过接收一个 loginItems 数组 prop，动态渲染第三方登录图标列表。
总结
登录注册页的核心是 Element Plus 的表单组件。在动手实现前，先分析业界主流设计方案的结构模式，明确页面需要包含的层次（标题、Tab 切换、表单输入、按钮操作、第三方登录），然后通过 props 设计让组件具备灵活的配置能力。后续章节将逐步补充语言切换、暗黑模式、响应式布局和表单校验等功能。
↑